<template>
 <div class="table_wrapper">
     <div class="my_table_ctr">
         <div class="my_table_ctr_left">
             <el-button type="primary" @click="add" size="mini">添加</el-button>

         </div>
         <div class="my_table_ctr_right">
             <el-button type="info" icon="el-icon-refresh" @click="init" size="mini"></el-button>
         </div>
     </div>
     <div class="my_table_data">
         <el-table  :data="permissions"
                   size="mini"
                   :border="true"
                   :stripe="true"
                   :highlight-current-row="true"
                   row-key="id"
                   @selection-change="selectChange"
                   ref="table"
                   @sort-change="sortChange"
                   v-loading="tableLoading">

             <el-table-column
                     type="index">
             </el-table-column>
             <el-table-column prop="menuName" label="菜单名称">
             </el-table-column>
             <el-table-column prop="componentName" label="组件">
                 <template slot-scope="scope">
                 {{scope.row.componentName?scope.row.componentName:'-'}}
                 </template>
             </el-table-column>
             <el-table-column prop="routerUrl" label="路由地址">
             </el-table-column>
             <el-table-column prop="menuIcon" label="菜单图标">
             </el-table-column>

             <el-table-column prop="componentName" label="菜单类型">
                 <template slot-scope="scope">
                     <span v-if="scope.row.type===0">一级菜单</span>
                     <span v-if="scope.row.type===1">菜单</span>
                     <span v-if="scope.row.type===2">按钮/权限</span>
                 </template>
             </el-table-column>
             <el-table-column prop="priority" label="排序">
             </el-table-column>
             <el-table-column prop="permsCode" label="权限标识">
                 <template slot-scope="scope">
                     {{scope.row.permsCode?scope.row.permsCode:'-'}}
                 </template>
             </el-table-column>
             <el-table-column label="操作" width="220px" fixed="right">
                 <template slot-scope="scope">
                     <el-button
                             size="mini"
                             type="primary"
                             @click="addChild(scope.row)" > 添加子菜单</el-button>
                     <el-button
                             size="mini"
                             plain
                             @click="handleEdit(scope.row)" icon="fa fa-edit "></el-button>
                     <el-button
                             size="mini"
                             plain
                             type="danger"
                             @click="deleteMenu(scope.row)"
                             icon="fa fa-trash"></el-button>
                 </template>
             </el-table-column>
         </el-table>
     </div>
     <save ref="save" @refresh="init"></save>
 </div>
</template>

<script>
    import curdMixins from '../../../common/mixins/curdMixins'
    import {selectMenuList,deleteById} from "../../../api/base/menu";
    import save from './save/save'
    export default {
        name: "menus",
        mixins:[curdMixins],
        components:{
            save
        },
        data(){
            return{
                 permissions:[],
                 tableLoading:false,
            }
        },
        created(){
           this.init();
        },
        methods:{
            init(){
                this.tableLoading=true;
                selectMenuList().then(res=>{
                    if(res.status===0){
                          this.permissions=res.data;
                    }
                    this.tableLoading=false;
                })
            },
            deleteMenu(data) {
                this.$confirm('确定删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        deleteById(data).then(res=>{
                            if(res.status===0){
                                this.$notify({
                                    title: '删除成功',
                                    type: 'success',
                                    duration: 1500
                                });
                                this.init();
                            }else {
                                this.$message.error(res.msg);
                            }
                        })
                }).catch(() => {

                });
            },
            addChild(data){
               this.$refs.save.addChild(data);
            }
        }

    }
</script>

<style scoped lang="sass">
 @import "../../../styles/table"
</style>
